<template>
  <view class="brandList">
    <u-list
      v-if="orderList.length !== 0"
      height="100vh"
      @scrolltolower="getMore"
    >
      <u-list-item>
        <u-grid :border="false" col="3">
          <u-grid-item
            @click="() => handleClick(item)"
            v-for="item in orderList"
            :key="item.value"
          >
            <view class="box">
              <image class="grid-img" :src="item.brandImage" mode=""></image>
              <view class="grid-text">{{ item.brandName }}</view>
            </view>
          </u-grid-item>
        </u-grid>
      </u-list-item>
    </u-list>
    <emptyList v-else></emptyList>
  </view>
</template>
<script setup>
import emptyList from "@/components/empty/emptyList.vue";
import { useList } from "@/hooks/useList";
import { getBankList } from "@/api/home";

const getList = async (item) => {
  console.log("=====", item);
  const res = await getBankList({
    ...item,
  });
  return res;
};
const { orderList, getMore, resetList } = useList(getList, {
  limit: 20,
  showRefresh: false,
});
const handleClick = (name) => {
  uni.navigateTo({
    url: "/pages/infoPages/brand/brandGoodsList?id=" + name.id,
  });
};
</script>
<style lang="scss">
page {
  background-color: #f9f9f9;
}
.brandList {
  margin-top: 10px;
  background-color: #fff;
  .box {
    width: 104px;
    height: 104px;
    padding-top: 17px;
  }
  .grid-img {
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 13px;
  }
  .grid-text {
    color: #333;
    font-size: 14px;
    line-height: 13px;
    text-align: center;
  }
}
</style>
